<template>
	<div class="select_user_wrapper" v-clickoutside="handleClickOutside">
		<div class="input">
			<template v-if="selectedUser.length > 0">
				<el-tag v-for="(item, index) in selectedUser" :key="index" closable disable-transitions @close="handleCloseTag(index)">{{ item.userName }}</el-tag>
			</template>
			<template v-else>
				<font>{{ placeholder || '请选择人员' }}</font>
			</template>
		</div>
		<el-button class="select" :size="size" type="primary" @click="handleSelectUser">选择人员</el-button>
		<div class="table" v-if="userBoxDialog">
			<el-form :inline="true" size="small" slot="title" class="user_search">
				<el-form-item><el-input v-model="userForm.account" clearable placeholder="用户账号" style="width: 160px"></el-input></el-form-item>
				<el-form-item><el-input v-model="userForm.userName" clearable placeholder="用户姓名" style="width: 160px"></el-input></el-form-item>
				<el-form-item prop="deptId">
					<el-select v-model="userForm.deptId" clearable filterable placeholder="用户院系">
						<el-option v-for="item in departData" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="type">
					<el-select v-model="userForm.type" clearable placeholder="用户类型" style="width: 120px">
						<el-option v-for="item in userTypeData" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item><el-button type="primary" @click="getUserListData">查询</el-button></el-form-item>
			</el-form>
			<el-table
				size="medium"
				ref="tables"
				:data="userListData"
				row-key="getRowId"
				style="width: 100%"
				height="300px"
				@select="handleSelectUserData"
				@select-all="handleAllselectUserData"
				v-loading="loading"
			>
				<el-table-column type="selection" width="44"></el-table-column>
				<el-table-column prop="account" label="账号"></el-table-column>
				<el-table-column prop="userName" label="姓名"></el-table-column>
				<el-table-column prop="deptName" label="院系">
					<template slot-scope="{ row }">
						{{ row.deptName || '--' }}
					</template>
				</el-table-column>
				<el-table-column label="用户类型" width="120">
					<template slot-scope="{ row }">
						<span v-if="row.type === '1'">学生</span>
						<span v-if="row.type === '2'">教师</span>
						<span v-if="row.type === '3'">管理员</span>
					</template>
				</el-table-column>
			</el-table>
			<sw-pagination notice="数据" :total="dataCount" :page.sync="listQuery.page" :limit="listQuery.limit" @change="getUserListData"></sw-pagination>
		</div>
	</div>
</template>

<script>
import { mapActions } from 'vuex';
import clickoutside from 'element-ui/src/utils/clickoutside';
export default {
	props: {
		value: {
			type: Array,
			default() {
				return [];
			}
		},
		size: {
			type: String,
			default: 'large'
		},
		placeholder: String
	},
	data() {
		return {
			loading: false,
			dataCount: 100,
			listQuery: {
				page: 1,
				limit: 10
			},
			userForm: {},
			selectedUser: this.value,
			userBoxDialog: false,
			departData: [],
			userTypeData: [],
			userListData: []
		};
	},
	directives: { clickoutside },
	watch: {
		value(arr) {
			this.selectedUser = arr;
		},
		selectedUser(arr) {
			this.$emit('input', arr);
		},
		userBoxDialog(flag) {
			if (flag) {
				this.userForm = {};
				this.listQuery.page = 1;
				this.getUserListData();
			}
		}
	},
	methods: {
		...mapActions(['getUserList', 'getDepartList']),
		getRowId(row) {
			return row.id;
		},
		//获取用户列表
		getUserListData() {
			let params = { ...this.listQuery, ...this.userForm };
			this.loading = true;
			this.$nextTick(() => {
				this.$refs['tables'].clearSelection();
			});
			this.getUserList(params).then((res) => {
				this.loading = false;
				this.dataCount = res.count;
				this.userListData = res.list;
				this.initSelectedUser();
			});
		},

		//选择用户
		handleSelectUser() {
			this.userBoxDialog = !this.userBoxDialog;
		},

		//点击组件外
		handleClickOutside() {
			this.userBoxDialog = false;
		},

		//初始化选中
		initSelectedUser() {
			this.selectedUser.forEach((item) => {
				let obj = this.userListData.find((n) => n.id === item.id);
				this.$nextTick(() => {
					!!obj && this.$refs['tables'].toggleRowSelection(obj, true);
				});
			});
		},

		//删除选中用户
		handleCloseTag(index) {
			this.selectedUser.splice(index, 1);
			if (!!this.userBoxDialog) {
				this.$refs['tables'].clearSelection();
				this.initSelectedUser();
			}
		},

		//选中的用户数据
		handleSelectUserData(data, row) {
			if (!this.selectedUser.some((n) => n.id === row.id)) {
				this.selectedUser.push(row);
			} else {
				let index = this.selectedUser.findIndex((n) => n.id === row.id);
				this.selectedUser.splice(index, 1);
			}
		},

		//全选的用户数据
		handleAllselectUserData(data) {
			if (data.length > 0) {
				data.forEach((item) => {
					if (!this.selectedUser.some((n) => n.id === item.id)) {
						this.selectedUser.push(item);
					}
				});
			} else {
				this.userListData.forEach((item) => {
					if (this.selectedUser.some((n) => n.id === item.id)) {
						let index = this.selectedUser.findIndex((n) => n.id === item.id);
						this.selectedUser.splice(index, 1);
					}
				});
			}
			console.log(this.selectedUser);
		}
	}
};
</script>

<style lang="scss" scoped>
.select_user_wrapper {
	display: flex;
	width: 100%;
	position: relative;
	.input {
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
		align-items: center;
		border: solid 1px #dcdfe6;
		border-radius: 4px 0 0 4px;
		border-right: none;
		padding: 0 15px 0 10px;
		.el-tag {
			margin: 3px 0 3px 5px;
		}
		&:hover {
			border-color: #c0c4cc;
		}
		font {
			color: #c0c4cc;
			margin-left: 5px;
		}
	}
	.el-button.select {
		border-radius: 0 4px 4px 0;
	}
	.table {
		position: absolute;
		top: calc(100% + 10px);
		left: 0;
		width: 100%;
		min-height: 200px;
		background-color: #fff;
		z-index: 2024;
		border-radius: 4px;
		box-sizing: border-box;
		border: solid 1px #dcdfe6;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
		&::before,
		&::after {
			position: absolute;
			top: -7px;
			right: 40px;
			content: '';
			border-bottom: solid 8px #fff;
			border-left: solid 6px transparent;
			border-right: solid 6px transparent;
			z-index: 3;
		}
		&::after {
			top: -9px;
			border-bottom-color: #dcdfe6;
			z-index: 2;
		}
		.el-pagination {
			padding: 10px;
		}
	}
	.user_search {
		padding: 10px 10px 0;
		.el-form-item {
			margin-bottom: 0;
		}
	}
}
</style>
